<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://www.rapid-framework.org.cn/rapid" prefix="rapid" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="mvc" %>
<%@ include file="nav.jsp"%>
<%@ include file="logo.jsp"%>
<%@ include file="item.jsp"%>
<%@ include file="footer.jsp" %>
<rapid:override name="contentContainer">
<div class="row">
     <div class="col-sm-12 minBox" >
     	<div class="center">
     		<h1 style="color: #0ea6b5 !important;font-weight: 800 !important;font-size: 40px !important; line-height: 50px !important;letter-spacing: 0 !important;">创建账号</h1>
     	</div>
     	<div style="margin-left:30px;margin-top:30px;margin-bottom:20px;">
			<h6 >请根据情况创建一个账号</h6>	
		</div>
     	<mvc:form modelAttribute="UserInfo" role="form" action="/pethub/registration_finish" method="post" class="registration-form">
		   <div class="col-sm-11 col-md-11 col-lg-11 registBox">
		   		<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="name" for="name" class="control-label col-lg-3 col-md-3 col-xs-12 float-left center">姓名:</mvc:label>
						<div class="col-lg-5 col-md-5 col-xs-12  float-left buttonMin">
							<mvc:input path="name" id='name' type="name" placeholder="张三" class="form-control" />
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="name" for="name" class="control-label col-lg-4 col-md-4 col-xs-12	 float-left center">出生日期:</mvc:label>
						<mvc:select path="year" class="buttonMin"> 
							<mvc:option value="NONE" label="年份"/> 
							<mvc:options items="${yearList}" />
						</mvc:select>
						<mvc:select path="month" class="buttonMin"> 
							<mvc:option value="NONE" label="月份"/> 
							<mvc:options items="${monthList}" />
						</mvc:select>
						<mvc:select path="day" class="buttonMin"> 
							<mvc:option value="NONE" label="日期"/> 
							<mvc:options items="${dayList}" />
						</mvc:select>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="clearfix"></div>
				<div style="margin-left:30px;margin-top:30px;margin-bottom:20px;">
					<h6 >请输入你的用户名和生日</h6>	
				</div>
		     </div>
		     
		     <div class="clearfix"></div>
		     
		     <div class="col-sm-11 col-md-11 col-lg-11 registBox">
		     	<div class="col-sm-12 col-md-4 col-lg-4 col-xs-12 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="Country" for="国家" class="control-label col-lg-4 col-md-4 col-xs-12	 float-left center">国家：</mvc:label>
						<mvc:select path="Country" class="buttonMin"> 
							<mvc:option value="NONE" label="国家"/> 
							<mvc:options items="${countryList}" />
						</mvc:select>
					</div>
				</div>
				<div class="col-sm-12 col-md-4 col-lg-4 col-xs-12 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="stateProvince" for="省份" class="control-label col-lg-4 col-md-4 col-xs-12	 float-left center">国家：</mvc:label>
						<mvc:select path="stateProvince" class="buttonMin"> 
							<mvc:option value="NONE" label="省份"/> 
							<mvc:options items="${provinceList}" />
						</mvc:select>
					</div>
				</div>
				<div class="form-group col-md-3 col-lg-3 col-xs-12 float-left registMinBox">
						<mvc:label path="city" for="city" class="control-label col-lg-4 col-md-4 col-xs-12 float-left center">城市:</mvc:label>
						<div class="col-lg-8 col-md-8 col-xs-12  float-left buttonMin">
							<mvc:input path="city" id='city' type="city" placeholder="城市" class="form-control" />
						</div>
						<div class="clearfix"></div>
				</div>
			   	<div class="form-group col-md-5 col-lg-5 col-xs-12 float-left registMinBox">
						<mvc:label path="street" for="street" class="control-label col-lg-3 col-md-3 col-xs-12 float-left center">街道:</mvc:label>
						<div class="col-lg-9 col-md-9 col-xs-12  float-left buttonMin">
							<mvc:input path="street" id='street' type="street" placeholder="街道" class="form-control" />
						</div>
						<div class="clearfix"></div>
				</div>
				<div class="form-group col-md-3 col-lg-3 col-xs-12 float-left registMinBox">
						<mvc:label path="postalCode" for="postalCode" class="control-label col-lg-4 col-md-4 col-xs-12 float-left center">邮编:</mvc:label>
						<div class="col-lg-8 col-md-8 col-xs-12  float-left buttonMin">
							<mvc:input path="postalCode" id='postalCode' type="postalCode" placeholder="邮编" class="form-control" />
						</div>
						<div class="clearfix"></div>
				</div>
				
				<div class="clearfix"></div>
				<div style="margin-left:30px;margin-top:30px;margin-bottom:20px;">
					<h6 >请输入详细信息</h6>	
				</div>
		     </div>
		     <div class="clearfix"></div>
		     <div class="col-sm-11 col-md-11 col-lg-11 registBox">
			   	<div class="form-group col-md-6 col-lg-6 col-xs-12 float-left registMinBox">
						<mvc:label path="Email" for="Email" class="control-label col-lg-3 col-md-3 col-xs-12 float-left center">邮件:</mvc:label>
						<div class="col-lg-9 col-md-9 col-xs-12  float-left buttonMin">
							<mvc:input path="Email" id='Email' type="Email" placeholder="邮件" class="form-control" />
						</div>
						<div class="clearfix"></div>
				</div>
				<div class="form-group col-md-6 col-lg-6 col-xs-12 float-left registMinBox">
						<mvc:label path="phoneNum" for="phoneNum" class="control-label col-lg-4 col-md-4 col-xs-12 float-left center">电话:</mvc:label>
						<div class="col-lg-8 col-md-8 col-xs-12  float-left buttonMin">
							<mvc:input path="phoneNum" id='phoneNum' type="num" placeholder="电话" class="form-control" />
						</div>
						<div class="clearfix"></div>
				</div>
				
				<div class="clearfix"></div>
				<div style="margin-left:30px;margin-top:30px;margin-bottom:20px;">
					<h6 >请输入详细信息</h6>	
				</div>
		     </div>
		     <div class="clearfix"></div>
		     	<div class="center" style="margin-left:30px;margin-top:30px;margin-bottom:20px;">
					<h1 style="color: #0ea6b5 !important;font-weight: 800 !important;font-size: 40px !important; line-height: 50px !important;letter-spacing: 0 !important;">宠物信息</h1>	
				</div>
		     
		     <div class="col-sm-11 col-md-11 col-lg-11 registBox">
		   		<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="petName" for="petName" class="control-label col-lg-4 col-md-4 col-xs-12 float-left center">宠物名称:</mvc:label>
						<div class="col-lg-5 col-md-5 col-xs-12  float-left buttonMin">
							<mvc:input path="petName" id='petName' type="petName" placeholder="小黑" class="form-control" />
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="petYear" class="control-label col-lg-4 col-md-4 col-xs-12	 float-left center">宠物生日:</mvc:label>
						<mvc:select path="petYear" class="buttonMin"> 
							<mvc:option value="NONE" label="年份"/> 
							<mvc:options items="${yearList}" />
						</mvc:select>
						<mvc:select path="petMonth" class="buttonMin"> 
							<mvc:option value="NONE" label="月份"/> 
							<mvc:options items="${monthList}" />
						</mvc:select>
						<mvc:select path="petDay" class="buttonMin"> 
							<mvc:option value="NONE" label="日期"/> 
							<mvc:options items="${dayList}" />
						</mvc:select>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="petSpecies" class="control-label col-lg-4 col-md-4 col-xs-12	 float-left center">宠物种类:</mvc:label>
						<mvc:select path="petSpecies" class="buttonMin"> 
							<mvc:option value="NONE" label="种类"/> 
							<mvc:options items="${speciesList}" />
						</mvc:select>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="petGender" class="control-label col-lg-4 col-md-4 col-xs-12	 float-left center">宠物性别:</mvc:label>
						<mvc:select path="petGender" class="buttonMin"> 
							<mvc:option value="NONE" label="性别"/> 
							<mvc:option value="female" label="母"/> 
							<mvc:option value="male" label="公"/> 
						</mvc:select>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="altered" class="control-label col-lg-4 col-md-4 col-xs-12	 float-left center">是否阉割:</mvc:label>
						<mvc:select path="altered" class="buttonMin"> 
							<mvc:option value="YES" label="是"/> 
							<mvc:option value="NO" label="否"/> 
							<mvc:option value="UNKNOWN" label="不清楚"/> 
						</mvc:select>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="clearfix"></div>
				<div style="margin-left:30px;margin-top:30px;margin-bottom:20px;">
					<h6 >请输入宠物基本信息</h6>	
				</div>
		     </div>
		     
		     
		     <div class="col-sm-11 col-md-11 col-lg-11 registBox">
		     	<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="color" class="control-label col-lg-4 col-md-4 col-xs-12	 float-left center">宠物颜色:</mvc:label>
						<mvc:select path="color" class="buttonMin"> 
							<mvc:option value="NONE" label="颜色"/> 
							<mvc:options items="${colorList}" />
						</mvc:select>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="coat" class="control-label col-lg-4 col-md-4 col-xs-12	 float-left center">宠物毛型:</mvc:label>
						<mvc:select path="coat" class="buttonMin"> 
							<mvc:option value="NONE" label="毛型"/> 
							<mvc:options items="${coatList}" />
						</mvc:select>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="size" class="control-label col-lg-4 col-md-4 col-xs-12	 float-left center">宠物大小:</mvc:label>
						<mvc:select path="size" class="buttonMin"> 
							<mvc:option value="NONE" label="大小"/> 
							<mvc:options items="${sizeList}" />
						</mvc:select>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="tail" class="control-label col-lg-4 col-md-4 col-xs-12	 float-left center">尾巴类型:</mvc:label>
						<mvc:select path="tail" class="buttonMin"> 
							<mvc:option value="NONE" label="大小"/> 
							<mvc:options items="${tailList}" />
						</mvc:select>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="weight" for="weight" class="control-label col-lg-4 col-md-4 col-xs-12 float-left center">宠物重量:</mvc:label>
						<div class="col-lg-5 col-md-5 col-xs-10  float-left no-padding-right buttonMin">
							<mvc:input path="weight" id='weight' type="weight" placeholder="0" class="form-control" />
						</div>
						<mvc:select path="weightUnit" class="buttonMin"> 
							<mvc:option value="lb" label="lb"/> 
							<mvc:option value="kg" label="kg"/> 
						</mvc:select>
						<div class="clearfix"></div>
					</div>
				</div>
				
				<div class="clearfix"></div>
				<div style="margin-left:30px;margin-top:30px;margin-bottom:20px;">
					<h6 >请输入宠物基本信息</h6>	
				</div>
		     </div>
		     
		     <div class="col-sm-11 col-md-11 col-lg-11 registBox">
		     	<!-- 检查图片 -->
		     	
        		<div class="row" style="display:none" id="imageCheck"></div>
	            <div class="row">
	                <div class="form-group col-md-10 col-lg-10 col-xs-10 ">
	                    <label class="col-md-3 col-lg-3 col-xs-3 float-left control-lable center" for="file">上传图片</label>
	                    <div class="col-md-7 col-lg-7 col-xs-7 float-left">
	                        <input type="file" id="multipartFile" class="form-control input-sm"/>
	                    </div>
	                    <div class="col-md-2 col-lg-2 col-xs-2 float-right">
			                <div class="form-actions ">
			                    <input type="button" value="上传" class="btn btn-primary btn-sm" onclick="checkUpload(this)">
			                </div>
			            </div>
			            <div class="clearfix"></div>
	                </div>
	            </div>
		           
				
				<div style="margin-left:30px;margin-top:30px;margin-bottom:20px;">
					<h6 >请上传宠物图片</h6>	
				</div>
		     </div>
				
		     <div class="col-sm-11 col-md-11 col-lg-11 registBox">
		     	<div style="margin-left:30px;margin-bottom:20px;">
					<h6 >如果已经购买了标签，则请在下面位置输入标签</h6>	
				</div>
		     	<div class="col-sm-12 col-md-5 col-lg-5 float-left registMinBox">
			   		<div class="form-group">
						<mvc:label path="petTag" for="petTag" class="control-label col-lg-3 col-md-3 col-xs-12 float-left center">标签ID:</mvc:label>
						<div class="col-lg-5 col-md-5 col-xs-12  float-left buttonMin">
							<mvc:input path="petTag" id='petTag' type="petTag" placeholder="PTX0123456" class="form-control" />
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="clearfix"></div>
				<div style="margin-left:30px;margin-bottom:20px;">
					<h6 >如果没有标签，可以不用填写</h6>	
				</div>
		     </div>
		     
		     <div class="col-sm-11 col-md-11 col-lg-11 registBox">
		     	<div style="margin-left:30px;margin-bottom:20px;">
					<h6 >输入密码</h6>	
				</div>
		     	<div class="col-sm-12 col-md-12 col-lg-12 registMinBox">
			   		<div class="form-group">
						<label  for="password" class="control-label col-lg-3 col-md-3 col-xs-12 float-left center">输入密码:</label>
						<div class="col-lg-5 col-md-5 col-xs-9  float-left buttonMin">
							<input id='oPassword' type="password" placeholder="" class="form-control"  />
						</div>
						<div class="col-lg-3 col-md-3 col-xs-3 float-left" id="check_tip"></div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="col-sm-12 col-md-12 col-lg-12 registMinBox">
					<div class="form-group">
						<mvc:label path="password" for="password" class="control-label col-lg-3 col-md-3 col-xs-12 float-left center">重新输入密码:</mvc:label>
						<div class="col-lg-5 col-md-5 col-xs-12  float-left buttonMin">
							<mvc:input path="password" id='password' type="password" placeholder="" class="form-control" onkeyup="checkPassword()" />
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="clearfix"></div>
				<div style="margin-left:30px;margin-top:30px;margin-bottom:20px;">
				</div>
		     </div>
		     
		     <div class="clearfix"></div>
		     <div>
		     	<button id="submitBtn" type="submit" class="btn btn-default float-right submitButton">提交</button>
		     </div>
		     
   		</mvc:form>
   
     </div>
 </div>
</rapid:override>
<%@ include file="base.jsp" %>
<script type="text/javascript">
	function checkUpload(){
		console.log("checkupload");
		var file=document.getElementById("multipartFile");
		
		  var oMyForm = new FormData();
		  oMyForm.append("file", file.files[0]);

		  $.ajax({
		    url: "/pethub/fileUploadCheck",
		    data: oMyForm,
		    dataType: 'multipart/form-data',
		    processData: false,
		    contentType: false,
		    type: 'POST',
		    success: function(msg) {
	        	alert(msg)
	            alert("File has been uploaded successfully");
	        },
	        error:function(msg) {
	        	alert(msg)
	        	console.log(msg)
	        }
		  });
	
	}
	function checkPassword(){
		var check_tip = document.getElementById("check_tip");
		var oPassword = document.getElementById("oPassword");
		var password = document.getElementById("password");
        if (password.value!=oPassword.value)
        {
            check_tip.innerHTML="<font color=red>两次输入的密码不相符</font>";
        }else{
            check_tip.innerHTML="<font color=blue>两次输入的密码相符</font>";
        }
    }
</script>